<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">
    你好
  </div>
  <h2>hello,are you ok?</h2>
  <h3>一次就好</h3>
  <ul id="uls">
    <li>火车</li>
    <li>k字头</li>
    <li>T字头</li>
    <li>Z字头</li>
    <li>D字头</li>
    <li>G字头</li>
    <p>飞机</p>
  </ul>
  <h1></h1>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // $("#box").click(function () { })
    // on绑定事件   
    $("#box").on("click", function () {
      alert("你好")
    })
    // 可以完成事件代理 事件委托
    // var uls = document.getElementById("uls")
    // uls.onclick = function (e) {
    //   console.log(e.target)
    // }
    // 父元素.on("事件","子元素",function(){})
    $("ul").on("click", "p,li", function () {
      $("h1").html($(this).html())
    })

    // off(事件名) 解绑元素的事件
    $("#box").off("click");
    //另一组绑定事件-----------------bind绑定   unbind解绑
    $("h2").bind("click", function () {
      alert("thank you")
    })
    $("h2").unbind("click") //解绑

    // one 绑定的事件只触发一次
    $("h3").one("click", function () {
      alert("一次就好")
    })


  </script>
</body>

</html>